<template>
  <div>
    <mt-header fixed title>
      <mt-button slot="left" class="el-icon-s-unfold" @click="drawer=true"></mt-button>
      <mt-button slot="right" class="el-icon-search" v-le="ty"></mt-button>
    </mt-header>
    <el-drawer :visible.sync="drawer" direction="ltr">
      <!--<bottt></bottt>-->
      <!---->
      <el-menu
        class="el-menu-vertical-demo"
        background-color="#333333"
        text-color="#fff"
        active-text-color="#ffd04b"
        router
        :default-active="activeIndex2"
        @select="handleSelect"
      >
        <el-menu-item index="/">
          <span slot="title">首页</span>
        </el-menu-item>
        <el-menu-item index="/no2">
          <span slot="title">效果图</span>
        </el-menu-item>
        <el-menu-item index="/no3">
          <span slot="title">样板案例</span>
        </el-menu-item>
        <el-menu-item index="/no4">
          <span slot="title">装修知识</span>
        </el-menu-item>
        <el-submenu index="/no5" class="myclass" ref="my">
          <template slot="title">
            <span>
              <a href="#/no5" :style="{color:$route.path=='/no5'?'#ffd04b':'#FFFFFF'}">关于我们</a>
            </span>
          </template>
          <el-menu-item index="/no6">设计团队</el-menu-item>
          <el-menu-item index="/no7">联系我们</el-menu-item>
        </el-submenu>
      </el-menu>
      <!---->
    </el-drawer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      drawer: false,
      activeIndex2: "/",
      ty: false
    };
  },
  watch: {
    "$route.path"() {
      this.drawer = false;
      // this.activeIndex2 = this.$route.path
    }
  },
  mounted() {
    this.activeIndex2 = this.$route.path;
  },
  methods: {
    btn() {
      console.log("hello");
    },
    handleSelect(key, keyPath) {
      console.log(key);
    }
  },
  directives: {
    le(a, b) {
      a.onclick = function() {
        if (b.value == false) {
          var div = document.createElement("div");
          div.className = "le_div";
		  div.innerHTML = `<div>123</div>`;
		  console.log(div)
          var body = document.body;
          body.append(div);
          b.value = true;
        } else if ((b.value = true)) {
          var ad = document.querySelector(".le_div");
          var body = document.body;
          ad.style.opacity = 0;
          body.removeChild(ad);
          b.value = false;
        }
        div.onclick = function() {
          if ((b.value = true)) {
            var ad = document.querySelector(".le_div");
            var body = document.body;
            ad.style.opacity = 0;
            body.removeChild(ad);
            b.value = false;
          }
        };
      };
    }
  }
};
</script>

<style>
a {
  text-decoration: none;
}
.el-menu {
  border-right: none;
}

.mint-header {
  height: 60px !important;
  background: #333333 !important;
}

.el-drawer {
  background: #333333 !important;
  color: #ffffff;
  width: 50% !important;
}

.el-drawer__header {
  display: none;
}

.mint-header-title {
  height: 45px !important;
  background: url("http://575e5b35c4ee7.t73.qifeiye.com/qfy-content/uploads/2017/12/5dd25ee50037898ef5a890a3f4c30354.png")
    no-repeat;
  background-size: auto 100%;
  background-position: center;
}
.le_div {
  position: fixed;
  top: 0px;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  text-align: center;
  opacity: 1;
}
.le_div>div{
	padding-top:200px;

}
</style>